<template>
  <div class="orderInformation">
    <div class="center">
      <p class="title">填写订单信息</p>
      <!-- 租赁公司信息 -->
      <span class="mainMessage">租赁公司信息</span>
      <div class="box">
        <!-- <div class="box-top"> -->
          <div class="box-top">
            <span>公司名称：{{ usermassage.companyName }}</span>
            <span>联系人：{{ usermassage.contactName }}</span>
            <span>联系方式:{{ usermassage.contactPhone }}</span>
          </div>
          <div class="box-top">
            <span>统一社会信用代码：{{ usermassage.companyCode }}</span>
            <span>法人：{{ usermassage.legalIdName }}</span>
            <span>法人联系方式:{{ usermassage.legalPhone }}</span>
          </div>
          <!-- <span>公司名称：{{ usermassage.companyName }}</span>
          <span>联系人：{{ usermassage.contactName }}</span>
          <span>联系方式:{{ usermassage.contactPhone }}</span>
        </div> -->
        <!-- <div class="box-top">
          <span>统一社会信用代码：{{ usermassage.companyCode }}</span>
          <span>法人：{{ usermassage.legalIdName }}</span>
          <span>法人联系方式:{{ usermassage.legalPhone }}</span>
        </div> -->
      </div>

      <!-- 租赁费用信息 -->
      <div class="mainMessage" v-if="housemassage.length > 0">租赁费用信息</div>
      <div class="houseMessage" v-for="(item, i) in housemassage" :key="i">
        <span>房屋基础信息</span>
        <table border="1">
          <tr>
            <th>房屋类型</th>
            <td >{{ projectBuidongTypeObj[item.buildingType] }}</td>
            <th>朝向</th>
            <td>
              <span v-for="(item1 ,i1) in projectDirctionObj" :key="i1" >
                <span v-if="item1.value == item.projectDirection">
                    {{ item1.description }}
                </span>
              </span>
            </td>
            <th>楼号</th>
            <td>{{ complexBuildingObj[item.projectRegionId] }}</td>
          </tr>
          <tr>
            <th>楼层</th>
            <td>{{ item.projectFloorNumber }}层</td>
            <th>房号</th>
            <td>{{ item.projectName }}</td>
            <th>面积</th>
            <td>{{ item.projectArea }}㎡</td>
          </tr>
          <tr>
            <th>租赁单价</th>
            <td colspan="5">{{ item.projectUnitPrice }}元/㎡</td>
          </tr>
        </table>
      </div>

      <!-- 租金 -->
      <div class="rent">
        <div>
          <span>租赁金额明细</span>
          <!-- <span class="delay">免延一个月</span> -->
          <!-- <span style="float: right; padding: 3px 0"
            >小计：<span class="color">{{ calculation.rentAmount }}元</span></span
          > -->
          <div class="line"></div>
        </div>
        
        <div class="checks">
          <!-- 租赁开始日期 -->
          <div class="date">
            <span style="color : #ff0000">*</span>
            <span >租赁开始日期：</span>
            <el-date-picker v-model="date" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" :picker-options="pickerOptions" @change="handleChangeDate"> </el-date-picker>
          </div>
          <!-- 租赁月份 -->
          <div class="month">
            <span style="color : #ff0000">*</span>
            <span>租赁月份：</span>
            <el-cascader v-model="value" :options="options" @change="handleChange"></el-cascader>
          </div>
        </div>
        <div class="subtotal">
         <span style="padding : 5px">租金</span>
         <span class="delays" v-if="coupons">{{sysCouponInfoname}}</span>
          <span class="subtotalnum" style="float: right; padding: 3px 0"
            >小计：<span class="color">{{ calculation.rentAmount }}元</span></span
          >
        </div>
        <table border="1">
          <thead>
            <tr>
              <th class="th">租赁起止时间</th>
              <td class="td1">{{ transactionTime }}</td>
              <th  class="th">租赁总面积</th>
              <td class="td2">
                {{ calculation.projectArea }}
                ㎡</td>
              <th  class="th">税率</th>
              <td class="td2">9%</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th  class="th">计费时间</th>
              <td class="td">{{ transactionTime }}</td>
              <th  class="th">收费金额（元）</th>
              <td colspan="3" >{{ hoseMoney }}元</td>
            </tr>
          </tbody>
        </table>

        <!-- <div class="subtotal pos1">
          <span>租赁保证金</span>
          <span
            >小计：<span class="color">{{ calculation.guaranteeAmount }}元</span></span
          >
        </div> -->
        <div class="subtotal">
          <span>市场管理服务费</span>
          <span class="subtotalnum" style="float: right; padding: 3px 0"
            >小计：<span class="color">{{ calculation.marketAmount }}元</span></span
          >
        </div>
        <table border="1">
          <thead>
            <tr>
              <th  class="th">单价</th>
              <td class="td1">5元/㎡.月</td>
              <th  class="th">税率</th>
              <td>6%</td>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th  class="th">计费时间</th>
              <td class="td1">{{ transactionTime }}</td>
              <th  class="th">收费金额（元）</th>
              <td>{{ serviceCharge }}元</td>
            </tr>
          </tbody>
        </table>
      </div>
      <div class="OtherServices">
        <span class="else-span">
          <span>其他服务：</span>
          <span class="elsething" v-for="(item, i) in bazaar" :key="i">
            <a :href="item['remarks']" style="text-decoration:none; color: #666666;">{{item['description']}}</a>
          </span>
          <!-- <span class="elsething">保洁1200元/年</span>
          <span class="elsething">宽带办理800元/年</span> -->
        </span>
      </div>
      <div class="pays" v-if="coupons">
        <p>优惠活动：{{sysCouponInfoname}}</p>
      </div>
      <!-- <div class="pay">
        <el-radio v-model="radio" label="1">全款支付</el-radio>
        <el-radio v-model="radio" label="2">分期付款</el-radio>
        <span>支付方式：</span>
      </div> -->
      <div class="pays" style="padding-right: 20px;margin-top: 15px;">
        <el-radio-group v-model="radio1" v-show="radio == 2">
          <el-radio-button label="1">1000.00元X2期</el-radio-button>
          <el-radio-button label="2">10001.00元X12期</el-radio-button>
          <el-radio-button label="3">10002.00元X12期</el-radio-button>
          <el-radio-button label="4">100022.00元X12期</el-radio-button>
        </el-radio-group>
        <el-radio v-model="radio" label="2" :disabled='true' style=" padding-top:10px">分期付款</el-radio>
        <el-radio v-model="radio" label="1" style=" padding-top:10px">全款支付</el-radio>
        <span style="color: #606266; padding-top:5px">支付方式：</span>
      </div>
      <div class="else">
        <span class="else-span" style=" padding-right:10px">
          应付金额（元）：
          <span class="color">{{ calculation.totalAmount }}元</span>
        </span>
      </div>
      <div class="confirms">
        <el-button type="primary" class="submits" @click="confirm">确认提交</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getItem } from '@/utils/store.js'
import { getHoserent, getHouseList, getCompute, append } from '@/views/BasicServicesPark/api/orderInformation.js'
export default {
  data() {
    return {
      pickerOptions: {
          disabledDate(time) {
            if(time.getTime() < Date.now() -(3600 * 1000 * 24) || time.getTime()  > Date.now() + (3600 * 1000 * 24 * 7)){
              return  true;
            }else{
              return  false;
            }
          },
      },
      radio1:'',
      chooseRentTime: 12,
      date: '',
      value: [12],
      radio: '1',
      coupons: false,
      transactionTime: '2019.09.17-2020.10.16', //起止时间
      options: [
        {
          value: 12,
          label: '12个月'
        },
        {
          value: 11,
          label: '11个月'
        },
        {
          value: 10,
          label: '10个月'
        },
        {
          value: 9,
          label: '9个月'
        },
        {
          value: 8,
          label: '8个月'
        },
        {
          value: 7,
          label: '7个月'
        },
        {
          value: 6,
          label: '6个月'
        },
        {
          value: 3,
          label: '3个月'
        }
      ],
      condition: {
        ids: ''
      }, //查看房屋的id集合
      oders: {
        ids: []
      },
      calculation: {
        rentAmount : 0,
      },
      usermassage: {}, //商户的信息
      housemassage: [], //查看房屋的信息
      hoseMoney: 0, //收费金额
      serviceCharge: 0,
      rentEndTime: '',
      sysCouponInfo:[],
      dict:[],
      bazaar: [],
      sysCouponInfoname:'',
      projectDirctionObj:[],
      complexBuildingObj:[],
      projectBuidongTypeObj:[],
    }
  },
  created() {
    this.getuserMessage()
    this.getHouseLists()
    this.getComputes()
    this.initData()
    this.coupon()
    this.dictionaries()
    this.marketService()
    this.complexbuilding()
    this.reasonsrefund()
    this.projectDirction()
  },
  methods: {
    async projectDirction(){
      let that = this;
      let type= 'rm_project_dirction';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口rm_project_dirction');
      console.log(res);
      this.projectDirctionObj = res.data;
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    async complexbuilding(){
      let that = this;
      let type= 'complex_building';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口complex_building');
      console.log(res);
      res.data.forEach(row => {
          this.complexBuildingObj[row.value] = row.description;
      });
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    async reasonsrefund(){
      let that = this;
      let type= 'rm_project_buiding_type';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // that.bazaar = res.data
      console.log('接口rm_project_buidong_type');
      console.log(res);
      res.data.forEach(row => {
          this.projectBuidongTypeObj[row.value] = row.description;
      });
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    initData() {
		console.log(this.date)
		const dt = new Date()
		const y = dt.getFullYear()
		const m = (dt.getMonth() + 1 + '').padStart(2, '0')
		const d = (dt.getDate() + '').padStart(2, '0')
		this.date = `${y}-${m}-${d}`
		this.handleChange(this.chooseRentTime)
	},
    iscompay() {
      let isCompany = getItem('USER_INFO').data.data.isCompany
      if (isCompany == '1') {
        this.authentication = true
      }
      this.authentication = false
    },
    async coupon() {
      let that = this
      let id = getItem('XIE_XIN').user_id;
      let companyId = getItem('USER_INFO').data.data.companyId
      let params ={
        id : companyId
      }
      const { data: res } = await that.$http.get(`/config/sysCouponInfo/company/${id}`, {
        params: params
      })
      // console.log(res)
      if(res.data.length > 0){
        that.coupons = true
      }else{
        that.coupons = false
      }
      
      // that.tableData = res.data.records
      // console.log(that.tableData)
      // this.total = res.data.total
      // console.log(that.total)
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
      that.sysCouponInfo = res.data;
      this.couponName()
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    async dictionaries() {
      let that = this;
      let type= 'coupon_type';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      // console.log('字典2')
      // console.log(res)
      // that.tableData = res.data.records
      // console.log(that.tableData)
      // this.total = res.data.total
      // console.log(that.total)
      
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
      this.dict = res.data;
      this.couponName()
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    //确定 渲染的优惠券名称
    couponName(){
      let that = this;
      // that.sysCouponInfo
      // that.dict
      that.dict.forEach(row => {
        // this.totalArea += row.projectArea
        if(that.sysCouponInfo.length > 0){
          if(row.label == that.sysCouponInfo[0].type){
            this.sysCouponInfoname = row.value;
            // console.log(row);
          }
        }
      })
    },
    async marketService(){
      let that = this;
      let type= 'market_service ';
      const { data: res } = await that.$http.get(`/admin/dict/type/${type}`, {
        
      })
      that.bazaar = res.data
      if (res.code !== 0) {
        return that.$message.error('获取优惠券信息失败！')
      }
    },
    async getuserMessage() {
      let that = this
      let id = getItem('XIE_XIN').user_id
      // console.log(id)
      const { data: res } = await getHoserent(id)
      that.usermassage = res.data
      // console.log(res + '用户信息');
      // console.log(this.usermassage);
      if (res.code !== 0) {
        return this.$message.error('获取商户信息失败！')
      }
      // that.tableData = res.data.records
      // console.log(that.tableData)
    },
    async getHouseLists() {
      this.condition.ids = getItem('HousesChooesLists').toString()
      // console.log('数据');
      // console.log(this.condition);
      const { data: res } = await getHouseList(this.condition)
      this.housemassage = res.data
      // console.log('数据');
      // console.log(res);
      // console.log(this.housemassage);

      if (res.code !== 0) {
        return this.$message.error('获取房屋信息失败！')
      }
      this.chargeAmount();
    },
    async getComputes() {
      let ids = getItem('HousesChooesLists')
		//let that = this
      let dat = {
        //discountTime: 1,
        rentTime: this.value[0],
        ids: ids,
        orderType: 1
      }
      const { data: res } = await getCompute(dat)
		console.log(res)
		if(res.code === 0){
			this.calculation = res.data
		}
		
      this.chargeAmount();
      // this.handleChange(this.value[0])
    },
    chargeAmount(){
      let that = this
      if(that.housemassage){
        that.hoseMoney = 0
        that.housemassage.forEach(item => {
          // e.projectList.forEach(item =>{
            // console.log(item)
            that.hoseMoney += item.projectUnitPrice * item.projectArea
          // })
          
        })
        that.hoseMoney = ((that.hoseMoney * (that.chooseRentTime + 1)) / (1 + 0.9)).toFixed(2)
      }
      // console.log(that.chooseRentTime)
      
      that.serviceCharge = ((that.calculation.projectArea * that.chooseRentTime) / (1 + 0.6)).toFixed(2)
      // console.log();
      // console.log(that.serviceCharge);
    },
    handleChangeDate(dd){
		// console.log(dd)
		this.date = dd
		this.changeTime(this.chooseRentTime)
    },
    handleChange(mm) {
      let that = this
      that.getComputes()
      that.changeTime(mm)
    },
    changeTime(mm){
        let that = this
        that.chooseRentTime =parseInt(mm) 
        const dt = new Date(that.date)
        const y = dt.getFullYear()
        const m = (dt.getMonth() + 1 + '').padStart(2, '0')
        const d = (dt.getDate() + '').padStart(2, '0')
        var newM = parseInt(m) + parseInt(mm) 
        // console.log(newM)
        if (newM > 12) {
          var endY = y + 1
          var endM = newM - 12
          that.transactionTime = `${y}-${m}-${d}--${endY}-${endM}-${d}`
          that.rentEndTime = `${endY}-${endM}-${d}`
        }
        if (newM == 12) {
          const equalY = y + 1
          const equalM = newM
          that.transactionTime = `${y}-${m}-${d}--${equalY}-${equalM}-${d}`
          that.rentEndTime = `${endY}-${endM}-${d}`
        }
        if (newM < 12) {
          const LessThanY = y
          const LessThanM = newM
          that.transactionTime = `${y}-${m}-${d}--${LessThanY}-${LessThanM}-${d}`
          that.rentEndTime = `${endY}-${endM}-${d}`
        }
      },
    async confirm() {
      let userId = getItem('XIE_XIN').user_id
      let parentId = getItem('USER_INFO').data.data.parentId
      let companyId = getItem('USER_INFO').data.data.companyId
      // let companyName = getItem('USER_INFO').data.data.companyName
      let date = {
        // orderNumber: '',
        userId: userId,
        parentId: parentId,
        companyId: companyId,
        // companyName: '重庆龙廷汽车销售有限公司',
        serviceType: 1, //服务类型1.房屋租赁
        orderType: 1, //订单类型1.租赁合同2.缴费合同
        // orderAmount: '',//订单金额
        // couponNumber: '',
        rentStartTime: this.date,
        rentEndTime: this.rentEndTime,
        feeEndTime: this.rentEndTime,
        discountTime: 1,
        rentTime: this.value[0],
        rentAmount: this.calculation.rentAmount,
        // rentTaxAmount: '',
        guaranteeAmount: this.calculation.guaranteeAmount,
        marketFee: this.calculation.marketAmount,
        // marketTaxAmount: '',
        // discountAmount: '',
        totalAmount: this.calculation.totalAmount,
        projectIds: this.condition.ids.split(',')
      }
      // console.log(date)
      const { data: res } = await append(date)
      // console.log(res)
      if (!res.code == 0) {
        return this.$message(res.msg)
      }
      // this.$router.push({ name: 'payment', param: { id: res.data.orderNumber, } })
      this.$router.push({ path: '/payment', query: { id: res.data.orderNumber, money: this.calculation.totalAmount } })
    }
  }
}
</script>

<style>
@import './orderInformation.css';
</style>
